/* 响应式布局优化 */

/* 内容区域最大宽度限制 */
.content-container {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 20px;
}

/* 针对不同分辨率的优化 */
@media (min-width: 1920px) {  /* 2K及以上分辨率 */
  .content-container {
    max-width: 1600px;
  }


}

@media (max-width: 1440px) and (min-width: 1367px) {  /* 1440p分辨率 */
  .content-container {
    max-width: 95%;
  }
}

@media (max-width: 1366px) and (min-width: 1025px) {  /* 小屏笔记本 */
  .content-container {
    max-width: 98%;
    padding: 0 15px;
  }

  /* 侧边栏适配 */
  .sidebar-container {
    width: 180px !important;
  }

  .main-container {
    margin-left: 180px !important;
  }

  /* 表格优化 */
  .el-table .cell {
    padding: 8px 6px !important;
  }

  /* 表单优化 */
  .el-form-item__label {
    width: 80px !important;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {  /* 平板设备 */
  .content-container {
    max-width: 100%;
    padding: 0 10px;
  }

  /* 侧边栏折叠 */
  .sidebar-container {
    width: 60px !important;
    overflow: visible !important;
  }

  .main-container {
    margin-left: 60px !important;
  }

  /* 隐藏侧边栏文字，只显示图标 */
  .sidebar-container .el-menu-item span,
  .sidebar-container .logo-title,
  .sidebar-container .logo-subtitle {
    display: none !important;
  }

  /* 表格响应式 */
  .el-table .el-table__header-wrapper,
  .el-table .el-table__body-wrapper {
    overflow-x: auto;
  }

  /* 隐藏次要表格列 */
  .el-table-column--secondary {
    display: none !important;
  }
}

/* 表格卡片样式 */
.table-card {
  margin-bottom: 20px;
}

.table-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 紧凑型表格样式 */
.compact-table {
  margin-bottom: 20px;
}



/* 卡片网格布局 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* 状态卡片样式 */
.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-card .stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-card .stat-label {
  color: #909399;
}

/* 操作按钮组 */
.action-group .el-button {
  margin-left: 5px;
  margin-right: 0;
}

/* 主内容区背景 */
.el-main {
  background-color: #f5f7fa;
}



/* 移动设备优化 */
@media (max-width: 768px) {  /* 移动设备 */
  .content-container {
    max-width: 100%;
    padding: 0 8px;
  }

  /* 侧边栏完全隐藏，使用抽屉式 */
  .sidebar-container {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 2000 !important;
  }

  .sidebar-container.mobile-open {
    transform: translateX(0) !important;
  }

  .main-container {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* 添加移动端菜单按钮 */
  .mobile-menu-btn {
    display: block !important;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1500;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px;
    font-size: 18px;
  }

  /* 表格移动端优化 */
  .el-table {
    font-size: 12px !important;
  }

  .el-table .cell {
    padding: 4px 2px !important;
    word-break: break-all;
  }

  /* 表单移动端优化 */
  .el-form-item {
    margin-bottom: 15px !important;
  }

  .el-form-item__label {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 5px !important;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }

  /* 对话框移动端优化 */
  .el-dialog {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  /* 按钮组优化 */
  .action-group {
    flex-direction: column !important;
  }

  .action-group .el-button {
    width: 100% !important;
    margin: 2px 0 !important;
  }
}

@media (max-width: 480px) {  /* 小屏手机 */
  .content-container {
    padding: 0 5px;
  }

  /* 进一步压缩间距 */
  .page-container {
    padding: 10px 5px !important;
  }

  /* 表格极简模式 */
  .el-table {
    font-size: 11px !important;
  }

  .el-table .cell {
    padding: 2px 1px !important;
  }

  /* 隐藏更多次要列 */
  .el-table-column--mobile-hidden {
    display: none !important;
  }

  /* 卡片布局优化 */
  .el-card {
    margin-bottom: 8px !important;
  }

  .el-card__body {
    padding: 8px !important;
  }
}

/* 响应式工具类 */
.hidden-mobile {
  display: block;
}

.hidden-tablet {
  display: block;
}

.hidden-desktop {
  display: none;
}

@media (max-width: 1024px) {
  .hidden-tablet {
    display: none !important;
  }

  .show-tablet {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .hidden-desktop {
    display: block !important;
  }
}

/* 响应式网格系统 */
.responsive-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 响应式文字大小 */
@media (max-width: 768px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
}

/* 响应式间距 */
@media (max-width: 768px) {
  .responsive-padding {
    padding: 10px !important;
  }

  .responsive-margin {
    margin: 10px !important;
  }
}

@media (max-width: 480px) {
  .responsive-padding {
    padding: 5px !important;
  }

  .responsive-margin {
    margin: 5px !important;
  }
}